<template>
  <div class="contents">
    <myRecord
      :headTitle="headTitle"
      :projectList="projectList"
      @reload="request"
      :key="keyIndex"
      :keyIndex.sync="keyIndex"
      ref="record"
    />
    <div class="layout">
      <div class="head">
        <div class="head-left">
          <el-select
            size="small"
            @change="request"
            v-model="projectId"
            placeholder="请选择项目"
            filterable
          >
            <el-option
              v-for="item in projectList"
              :key="item.deptId"
              :label="item.deptName"
              :value="item.deptId"
            >
              {{ item.deptName }}
            </el-option>
          </el-select>
          <el-date-picker
            clearable
            @change="request"
            v-model="strDate"
            size="small"
            style="width: 240px"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </div>
        <div class="head-right">
          <el-button size="small" type="primary" @click="add"
            >新增记录</el-button
          >
          <el-button size="small" @click="edit">修改记录</el-button>
          <el-button size="small" @click="leadingOut">导出</el-button>
        </div>
      </div>
      <div class="main">
        <el-table
          :data="tableData"
          border
          height="100%"
          highlight-current-row
          @current-change="handleCurrentChange1"
          style="width: 100%"
        >
          <el-table-column
            prop="accountTime"
            label="日期"
            width="180"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            prop="deptName"
            label="项目"
            width="180"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            prop="accountFundTypeName"
            label="资金类型"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            prop="currentAccountName"
            label="对方单位"
            width="180"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            prop="fundAccountName"
            label="账户"
            width="180"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            prop="accountType"
            label="收/支"
            width="180"
            :show-overflow-tooltip="true"
          >
            <template #default="scope">
              {{ scope.row.accountType === 1 ? "收入" : "支出" }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="accountAmount"
            label="金额"
            width="180"
            :show-overflow-tooltip="true"
          >
            <template #default="scope">
              <span class="jine blue1" v-if="scope.row.accountType === 1">{{
                fixeds(scope.row.accountAmount)
              }}</span>
              <span class="jine red1" v-else>{{
                fixeds(scope.row.accountAmount)
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="remark"
            label="备注"
            width="180"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            prop="status"
            label="状态"
            width="180"
            :show-overflow-tooltip="true"
          >
            <template #default="scope">
              <span class="blue1" v-if="scope.row.status === 2">已提交</span>
              <span class="black" v-else>未提交</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="createBy"
            label="填写人"
            width="180"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            width="180"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            prop="updateTime"
            label="提交时间"
            width="180"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            label="操作"
            fixed="right"
            align="center"
            width="180"
            :show-overflow-tooltip="true"
          >
            <template #default="scope">
              <span
                style="cursor: pointer; color: red"
                @click="remove(scope.row)"
                >删除</span
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="footer">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[20,100, 200, 300, 400]"
          :page-size="20"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import Derive from "@/utils/excel.js";
import myRecord from "./components/record";
import request from "@/utils/request";
import Qs from "qs";
export default {
  name: "bookkeeping",
  components: {
    myRecord,
  },
  data() {
    return {
      projectId: "",
      projectList: [],
      strDate: "",
      dateRange: "",
      tableData: [],
      currentPage: 1,
      keyIndex: 1,
      total: 0,
      pageNum: 1,
      pageSize: 20,
      headTitle: "",
      currentRow: {},
    };
  },
  async created() {
    await this.getprojectList();
    this.request();
  },
  methods: {
    fixeds(val) {
      return Number(val).toFixed(2) || "0.00";
    },
    remove(val) {
      this.$confirm("此操作将删除记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          request({
            url: "/system/flow/remove",
            method: "post",
            headers: { "content-type": "application/x-www-form-urlencoded" },
            data: Qs.stringify({
              accountId: val.accountId,
            }),
          }).then((res) => {
            this.request();
            if (JSON.stringify(this.currentRow) === JSON.stringify(val)) {
              // 删除选中数据，选中数据置空
              this.currentRow = {};
            }
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            console.log(res);
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleCurrentChange1(val) {
      this.currentRow = val;
    },
    getprojectList() {
      return new Promise((resolve, reject) => {
        request({
          url: "/system/flow/projectList",
          method: "post",
          headers: { "content-type": "application/x-www-form-urlencoded" },
          data: Qs.stringify({
            // projectId:'',
            // strDate:'',
          }),
        }).then((res) => {
          this.projectList = res.data.map((item) => {
            item.deptCodedeptName = item.deptCode + item.deptName;
            return item;
          });
          this.projectList.unshift({
            deptId: "",
            deptName: "全部",
            deptShortName: "全部",
          });
          if (this.projectList.length > 0) {
            this.projectId = this.projectList[0].deptId;
          }

          console.log(res);
          resolve(res);
        });
      });
    },
    request() {
      request({
        url: "/system/flow/list",
        method: "post",
        headers: { "content-type": "application/x-www-form-urlencoded" },
        data: Qs.stringify({
          projectId: this.projectId,
          startDate: this.strDate[0] || "",
          endDate: this.strDate[1] || "",
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          isAll:false,
        }),
      }).then((res) => {
        this.tableData = res.rows;
        this.total = res.total;
        console.log(res);
      });
    },
    handleSizeChange(val) {
      console.log(val);
      this.pageSize = val;
      this.request();
    },
    handleCurrentChange(val) {
      console.log(val);
      this.pageNum = val;
      this.request();
    },
    testVerify() {
      return new Promise((resolve, reject) => {
        if (!this.currentRow || Object.keys(this.currentRow).length === 0) {
          this.$message({
            type: "warning",
            message: "请选择项目",
          });
          reject();
        } else {
          resolve("请选择项目");
        }
      });
    },
    add() {
      this.headTitle = "新增记录";
      this.$refs.record.open({
        type: "add",
      });
    },
    async edit() {
      await this.testVerify();
      this.headTitle = "修改记录";
      this.$refs.record.open({
        type: "edit",
        currentRow: this.currentRow,
      });
    },
    leadingOut() {
      request({
        url: "/system/flow/list",
        method: "post",
        headers: { "content-type": "application/x-www-form-urlencoded" },
        data: Qs.stringify({
          projectId: this.projectId,
          startDate: this.strDate[0] || "",
          endDate: this.strDate[1] || "",
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          isAll:true,
        }),
      }).then((res) => {
        console.log(res);
        this.port(res.rows);
      });
    },
    export2Excel(data) {
      let tHeader = [];
      let filterVal = [];
      tHeader = [
        "日期",
        "项目",
        "资金类型",
        "对方单位",
        "账户",
        "收/支",
        "金额",
        "备注",
        "状态",
        "填写人",
        "创建时间",
        "提交时间",
      ];
      filterVal = [
        "accountTime",
        "deptName",
        "accountFundTypeName",
        "currentAccountName",
        "fundAccountName",
        "accountType",
        "accountAmount",
        "remark",
        "status",
        "createBy",
        "createTime",
        "updateTime",
      ];

      const excel = new Derive({
        bookType: "xlsx",
        filename: "记账excel",
        tHeader: [tHeader],
        list: [data],
        autoWidth: [true],
        sheetName: ["sheet"],
        filterVal: [filterVal],
      });
    },
    port(data) {
      let newData = [];
      if (data.length > 0) {
        newData = data.map((item) => {
          if (item.accountType === 1) {
            item.accountType = "收入";
          } else {
            item.accountType = "支出";
          }


          if (item.status === 2) {
            item.status = "已提交";
          } else {
            item.status = "未提交";
          }
          return item;
        });
      }
      this.export2Excel(newData);
    },
  },
};
</script>

<style scoped lang="scss">
.contents {
  width: 100%;
  height: calc(100vh - 85px);
  background: rgba(245, 246, 248, 1);
  padding: 10px;

  .blue1 {
    color: #1890ff;
  }

  .red1 {
    color: #f1ab98;
  }

  .black {
    color: #c4c4c4;
  }

  .jine {
    display: block;
    width: 100%;
    text-align: center;
  }

  .layout {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 4px;

    .head {
      width: 100%;
      height: 50px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 0 10px;

      &-left {
        .el-select {
          margin-right: 20px;
        }
      }
    }

    .main {
      width: 100%;
      height: calc(100% - 100px);
      padding: 10px;
    }

    .footer {
      width: 100%;
      height: 50px;
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: center;
      padding: 0 10px;
    }
  }
}
</style>
